<template>
	<view class="container page-user">
		<navigator url="./info-modify/index" class="userinfo">
			<span class="iconfont iconyonghuming"></span>
			<view class="info-content">
				<view class="user-name">Windir</view>
				<view class="user-account">账号：155361616</view>
				<span class="iconfont iconjiantou"></span>
			</view>
			<!-- <text class="login-tips">请登录</text> -->
		</navigator>
		<view class="info-list">
			<view class="info-list-cells">
				<navigator class="item" url="./setting/index">
					<span class="iconfont item-icon iconziyuan"></span>
					安全设置
					<span class="item-rigth-tips">
						<span class="iconfont iconjiantou"></span>
					</span>
				</navigator>
				<navigator class="item" url="./address/index">
					<span class="iconfont item-icon icondituweizhi"></span>
					收货信息
					<span class="item-rigth-tips">
						<span class="iconfont iconjiantou"></span>
					</span>
				</navigator>
				<navigator class="item">
					<span class="iconfont item-icon icondituweizhi"></span>
					关于
					<span class="item-rigth-tips">
						<span class="iconfont iconjiantou"></span>
					</span>
				</navigator>
				<view class="item" @tap="handleLoginOut">
					<span class="iconfont item-icon iconwode"></span>
					退出登录
					<span class="item-rigth-tips">
						<span class="iconfont iconjiantou"></span>
					</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			resData: {},
			userInfo: {},
			hasUserInfo: false,
		};
	},
	onShow() {},
	onLoad() {},
	methods: {
		handleLoginOut() {
			uni.showModal({
				title: '',
				content: '确认是否退出登录 ？',
				success: (res) => {
					if (res.confirm) {
						window.console.log('用户点击确定');
					} else if (res.cancel) {
						window.console.log('用户点击取消');
					}
				},
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.userinfo {
	background: $uni-color-main;
	display: flex;
	align-items: center;
	padding: 60rpx 40rpx;
	margin: 0 0 $uni-spacing-base;
	color: #fff;
	.iconyonghuming {
		background: #fff;
		width: 110rpx;
		height: 110rpx;
		border-radius: $uni-border-radius-circle;
		text-align: center;
		line-height: 110rpx;
	}
	.info-content {
		position: relative;
		flex: 1;
		padding-left: $uni-spacing-base;
	}

	.user-name {
		font-size: 32rpx;
		margin: 0 0 4rpx;
	}

	.user-account {
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.iconjiantou {
		position: absolute;
		top: 12rpx;
		right: 0;
		font-size: 40rpx;
	}
	.login-tips {
		padding-left: $uni-spacing-sm;
		font-size: 28rpx;
		color: #fff;
	}
}

.info-list {
	padding-left: $uni-spacing-lg;
	@include borderCreator(bottom, solid, $uni-border-color-grey);
	.item {
		background: #fff;
		padding: $uni-spacing-base $uni-spacing-base $uni-spacing-base 0;
		@include borderCreator(bottom, solid, $uni-border-color-grey);
		overflow: hidden;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
		&:last-child {
			border-bottom: none;
		}
	}
	.item-icon {
		font-size: 36rpx;
		margin-right: $uni-spacing-sm;
		color: $uni-text-color-grey;
	}
	.iconjiantou {
		font-size: 40rpx;
		color: $uni-text-color-grey;
	}
	.item-rigth-tips {
		float: right;
	}
}
</style>
